<template>
  <div>
    <el-input :disabled="isChildDisabled" v-model="ParDealer" readonly placeholder="请选择">
      <i slot="suffix" class="el-input__icon el-icon-search" @click="openDia" />
      <!-- <i slot="suffix" v-if="false" class="el-input__icon el-icon-error" @click="changeDE"></i> -->
    </el-input>

    <!-- 弹框 -->
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      title="选择退货申请单号"
      width="75%"
    >
      <!-- 查询条件 -->
      <div class="searchform">
        <el-form ref="search" :model="search" label-width="150px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="10">
              <el-form-item prop="RETURN_APPLY_NO" label="退货申请单号">
                <el-input v-model="search.RETURN_APPLY_NO" placeholder="退货申请单号" clearable />
              </el-form-item>
            </el-col>

            <div style="text-align:center">
              <el-button type="primary" icon="el-icon-search" @click="searchRole">查询</el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('search')">重置</el-button>
            </div>
          </el-row>
        </el-form>
      </div>

      <el-table
        v-loading="load"
        ref="roleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        border
        @current-change="select"
      >
        <el-table-column align="center" label="序号" type="index" min-width="50" />
        <el-table-column prop="DEALER_CODE" label="经销商代码" min-width="100"/>
        <el-table-column prop="DEALER_NAME" label="经销商名称" min-width="200"/>
        <el-table-column prop="RETURN_APPLY_NO" label="退货申请单号" min-width="200"/>
        <el-table-column prop="APPLY_AMOUNT" label="申请金额" min-width="200"/>
        <el-table-column prop="BALANCE_AMOUNT" label="结算金额" min-width="200"/>

      </el-table>
      <!-- 分页 -->
      <div style="text-align:right">
        <Pagination
          :data="page"
          @change-size="handleSizeChange"
          @change-page="handleCurrentChange"
        />
      </div>

      <div style="text-align:center">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="req">确 定</el-button>
          <el-button @click="goback()">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getReturnOrderInfo } from '@/api/part/dcs/financeManage/partAccountManage.js'
import filtercode from '@/components/Checkbox/filtercode'
import Pagination from '@/components/Pagination'

export default {
  name: 'SelectReturnOrder',
  components: {
    Pagination,
    filtercode,
    getReturnOrderInfo
  },
  props: {
    ParDealer: String,
    dealerCode: String,
    isChildDisabled: Boolean,
    stopFlag: Number,
    emergFlag: Number,
    revisionFlag: Number,
    cancelFlag: Number,
    modifyId: {
      type: String,
      default: ''
    },
    cancelId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      load: false,
      page: {},
      multipleSelection: [],
      search: {
        limit: 10,
        pageNum: 1,
        RETURN_APPLY_NO: '',
        stopFlag: this.$props.stopFlag,
        emergFlag: this.$props.emergFlag,
        revisionFlag: this.$props.revisionFlag,
        cancelFlag: this.$props.cancelFlag
      },
      dialogVisible: false
    }
  },
  mounted() {},
  methods: {
    resetForm() {
      this.$refs['search'].resetFields()
    },
    // 查询代理选择列表
    openDia() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.searchRole()
      })
    },
    // 删除代理
    changeDE() {
      this.billNo = ''
      this.$emit('changeDE', '')
    },
    searchRole() {
      this.load = true
      this.search.DEALER_CODE = this.ParDealer
      const searchParams = Object.assign({}, this.search, {
        modifyId: this.modifyId,
        cancelId: this.cancelId,
        DEALER_CODE: this.dealerCode
      })
      getReturnOrderInfo(searchParams)
        .then(res => {
          console.info(res)
          this.list = res.rows
          this.page = res
          this.load = false
        })
        .catch(err => {
          this.load = false
        })
    },

    select(val) {
      if (val === null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },

    handleSizeChange(size) {
      this.search.limit = size
      this.searchRole()
    },
    handleCurrentChange(page) {
      this.search.pageNum = page
      this.searchRole()
    },
    // 确定
    req: function() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
      } else {
        this.$emit('getReturnOrderInfo', this.multipleSelection)
        this.dialogVisible = false
        this.resetForm()
      }
    },
    goback() {
      this.dialogVisible = false
      this.resetForm()
    }
  }
}
</script>

<style scoped>
</style>
